<template>
<view class="search-view">
    <!-- 搜索栏 -->
    <view class="search-box">
      <view class="search-input-box">
        <uni-search-bar radius="100" placeholder="用户名" clearButton="auto" cancelButton="none" bgColor="#E5E5E5" @confirm="searchUser" v-model="data.searchText"/>
      </view>
      <!-- 按钮 -->
     <!-- <button class="s-button" @click="searchNote">搜索</button> -->
    </view>
    <!-- 笔记栏 -->
    <view class="user-log">
      <text>用户</text>
    </view>
    <!-- 搜索的笔记内容 -->
    <scroll-view class="serach-user-view" scroll-y="true" lower-threshold="50" @scrolltolower="getMoreUser">
      <view class="user-box" @click="showOtherInfo(index)" v-for="(item,index) in data.userList" :key="index">
        <image class="user-avater" :src="item.avatar"></image>
        <view class="user-info">
          <text class="user-name">{{item.userName}}</text>
          <text class="an-info">粉丝-{{item.funNum}}</text>
          <text class="user-account">账号：{{item.account}}</text>
        </view>
         <view class="s-button" v-if="data.curUser.id==item.id">我自己</view>
         <button class="s-button" v-else-if="data.curUser.id != item.id && item.att > 0" @click.stop="disAttUser(index)">已关注</button>
         <button class="s-button" v-else @click.stop="attUser(index)">关注</button>
      </view>
      <view class="tip-tag" v-if="data.userList.length >= data.total">
        暂无更多了
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { reactive, ref,toRefs,onMounted } from 'vue';
import helper from '../../common/helper.js'
 
const data = reactive({
  curUser: uni.getStorageSync("curUser") || null,
  searchText:"",
  userList:[],
  pageNum:0,
  pageSize:10,
  total: 0,
});

function searchUser(){
  console.log("查找好友"+data.searchText)
  data.userList = []
  data.pageNum = 0
  data.pageSize = 10
  searchUserReq()
}

function searchUserReq(){
  uni.request({
    url: helper.webUrl + "/user/searchUser",
    method:'GET',
    header:{
      'Content-Type': 'application/x-www-form-urlencoded',
      'token': helper.getToken()
    },
    data: {
      keyword: data.searchText,
      pageNum: data.pageNum,
      pageSize: data.pageSize
    },
    success: (res) => {
      console.log(res.data);
      if(res.data.code == 200){
        data.total = res.data.data.total
        data.userList = res.data.data.record
      }
    },
    fail: (err) => {
      console.error('请求失败:', err);
    }
  })
}

function getMoreUser(){
  console.log("下滑查看更多用户")
  searchUserReq()
}

function showOtherInfo(index){
  console.log("查看用户")
  if(data.userList[index].id == data.curUser.id){
    return
  }
  uni.navigateTo({
    url:"/subpages/otherInfo/otherInfo?userId="+data.userList[index].id
  })
}

async function attUser(index){
  console.log("关注用户")
  let res = await helper.attUserReq(data.userList[index].id)
  if(res.data.code == 200){
    data.userList[index].att = 1
    data.userList[index].funNum++
  }
}

async function disAttUser(index){
  let res = await helper.disAttUserReq(data.userList[index].id)
  if(res.data.code == 200){
    data.userList[index].att = 0
    data.userList[index].funNum--
  }
}
</script>

<style scoped>
.search-view{
  background-color: #f4f4f4;
  width: 100vw;
  height: 100vh;
}
.search-box{
  width: 100vw;
  display: flex;
  height: 8vh;
}
.search-input-box{
  width: 100%;
  height: 8vh;
  padding-top: 5px;
}
.s-button{
  width: 18vw;
  height: 60%;
  background-color: #89C0FF;
  color: #fff;
  font-size: 14px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-log{
  width: 100vw;
  height: 6vh;
  font-size: 20px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-weight: bold;
}
.serach-user-view{
  width: 100vw;
  height: 86vh;
}
.user-box{
  width: 100vw;
  height: 13vh;
  background-color: #fff;
  padding: 20px;
  display: flex;
  align-items: center;
}
.user-avater{
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.user-info{
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  width: 60%;
}
.user-name{
  font-size: 20px;
  font-weight: bold;
}
.an-info,.user-account{
  color: #949494;
  margin-top: 2px;
}
.tip-tag{
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 30px;
  font-size: 16px;
  color: #949494;
}
</style>
